import { Image } from '@nutui/nutui-react';
import { find } from 'lodash-es';

import { useGlobal } from '@/application/context/global';
import { classNames } from '@/application/utils';

import { useHome } from '../context';
export default function CardList() {
  const { cardList, reachCardInfo } = useHome();
  const { goodInfo } = useGlobal();
  return (
    <>
      <div className="absolute left-0 right-0 top-24.5 mx-auto w-77 scale-90">
        <div className={classNames('puzzle-grid', `puzzle-grid-${cardList?.length}`)}>
          {reachCardInfo?.finished ? (
            <Image src={goodInfo?.pictureActive} className="h-full w-75" />
          ) : (
            (cardList || []).map((item: any, index) => {
              const _active = find(
                reachCardInfo?.formatWin || [],
                (i) => `${i.id}` === `${item.id}`
              );
              return (
                <div key={item.id} className={classNames(`puzzle-piece piece-${index + 1}`)}>
                  <Image
                    src={_active?.id ? item?.activePicture : item?.unactivePicture}
                    className="h-full w-full"
                  ></Image>
                  {_active && <div className="puzzle-num">{`x${_active.num}`}</div>}
                </div>
              );
            })
          )}
        </div>
      </div>
      <div
        className={classNames('absolute left-0 right-0 top-79 text-center text-xs text-[#105506]')}
      >
        {`集拼图进度 ${reachCardInfo?.uniqWin?.length || 0}/${cardList?.length || 0}`}
      </div>
    </>
  );
}
